<template>
  <div>
    <el-form-item label="工作地点">
      <el-input v-model='aaa' style="width:215px" placeholder="工作地点" id="address" readonly name='resourceAddress'>
      </el-input>
    </el-form-item>
    <div class="map">
      <div id="container">

      </div>
    </div>

  </div>

</template>

<script>
var map, addMarker;
var geocoder;
var placeSearch;
var lnglatXY;
var t = 1;
export default {
  data () {
    return {
      aaa: '',
      lng: '',
      lat: ''
    };
  },
  props: {
    workPlace: {
      type: String,
      default: ''
    }
  },
  mounted () {
    this.drawmap();
  },
  watch: {
    'lng': function () {
      this.$emit('getlng', this.lng);
    },
    'aaa': function () {
      this.$emit('getaaa', this.aaa);
    },
    'lat': function () {
      this.$emit('getlat', this.lat);
    },
    workPlace: {
      handler (val) {
        this.aaa = val
      },
      immediate: true
    }
  },
  methods: {
    drawmap () {
      map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 15,
        center: [113.132763, 27.828758]
      })
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale'],
        function () {
          map.addControl(new AMap.ToolBar());

          map.addControl(new AMap.Scale());
        });
      AMap.service('AMap.Geocoder', () => {//回调函数
        //实例化Geocoder
        geocoder = new AMap.Geocoder({
          city: "北京",//城市，默认：“全国”
          adius: 1000
        });
        //TODO: 使用geocoder 对象完成相关功能
      });
      // 加载搜索列表
      this.myMapViewLocation();
      AMap.service(["AMap.PlaceSearch"], () => {
        placeSearch = new AMap.PlaceSearch({ //构造地点查询类
          pageSize: 5,
          pageIndex: 1,
          city: "北京", //城市
          map: map,
          panel: "panel"
        });
      });
      //为地图注册click事件获取鼠标点击出的经纬度坐标
      var clickEventListener = map.on('click', (e) => {
        this.lng = e.lnglat.lng
        this.lat = e.lnglat.lat
        console.log(this.lng, this.lat, '2222')
        $("input[name=lon]").val(e.lnglat.lng);
        $("input[name=lat]").val(e.lnglat.lat);
        // 填写地址
        this.writeAddress([e.lnglat.lng, e.lnglat.lat]);
        this.mapsearch(e.lnglat.lng, e.lnglat.lat);
      });
      //   $("#address").on("keydown",  (event)=> {
      //     if (event = event || window.event) {
      //       if (event.keyCode == 13) {
      //         this.markLocation();
      //       }
      //     }
      //   });
    },
    mapsearch (mlon, mlat) {
      // var mlon = $("input[name=lon]").val();
      // var mlat = $("input[name=lat]").val();
      this.myMapViewLocation(mlon, mlat);
    },
    myMapViewLocation (mlon, mlat) {
      //console.log("回显坐标");
      if (mlon && mlat) {
        //removeMarkers(lnglatXY);
        lnglatXY = [mlon, mlat];
        this.addMarker(lnglatXY);
      }
    },
    removeMarkers (lnglatXY) {
      var marker = new AMap.Marker({
        map: map,
        position: lnglatXY,
        icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        offset: new AMap.Pixel(-13, -30)
      });
      var markers = [];
      markers.push(marker);
      map.remove(markers);
    },
    addMarker (lnglatXY) {
      if (t == 1) {
        console.log(lnglatXY);
        var marker = new AMap.Marker({
          icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
          position: lnglatXY,
          offset: new AMap.Pixel(-13, -30),
          // 设置是否可以拖拽
          draggable: true,
          cursor: 'move',
          // 设置拖拽效果
          raiseOnDrag: true
        });
        marker.setMap(map);
        map.setFitView();// 执行定位
        t++;
      }

      //修改标点位置
      if (t != 1) {
        marker.setPosition(lnglatXY);
        map.setCenter(lnglatXY);
        marker.setMap(map);
        map.setFitView();// 执行定位
      }

    },
    writeAddress (lnglatXY) {
      var geocoder = new AMap.Geocoder({
        city: "北京", //城市，默认：“全国”
        radius: 1000 //范围，默认：500
      });
      geocoder.getAddress(lnglatXY, (status, result) => {
        console.log(lnglatXY, 'lnglatXY')
        if (status === 'complete' && result.info === 'OK') {
          this.geocoder_CallBack(result);
        }
      });
    },
    geocoder_CallBack (data) {
      var address = data.regeocode.formattedAddress; //返回地址描述
      this.aaa = address
      // console.log(this.aaa,'111')
      $("input[name=resourceAddress]").val(address);
    },
    markLocation () {
      var address = $("#address").val();
      console.log(address);

      AMap.plugin('AMap.Geocoder', () => {
        var geocoder = new AMap.Geocoder();
        geocoder.getLocation(address, (status, result) => {
          console.log(status, result.info, '111')
          if (status === 'complete' && result.info === 'OK') {

            // 经纬度                      
            var lon = result.geocodes[0].location.lng;
            var lat = result.geocodes[0].location.lat;

            // $("input[name=lon]").val(lon);
            // $("input[name=lat]").val(lat);

            lnglatXY = [lon, lat];
            this.addMarker(lnglatXY);
          } else {
            console.log('定位失败！');
          }
        });
      });
    }

  }
};
</script>
<style lang="css" scoped>
#container {
    width: 100%;
    height: 100%;
    position: static;
}
.map {
    margin-left: 100px;
    width: 220px;
    height: 150px;
    background: #ccc;
}
</style>
